<template>
  <div>
    
    <el-button type="primary" @click="openAddDialog">添加派工</el-button>
    <el-table :data="dispatches" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="Dispatch_id" label="派工人ID" width="100"></el-table-column>
      <el-table-column prop="Dispatched_id" label="被派工ID" width="100"></el-table-column>
      <el-table-column prop="Start_time" label="开始时间" width="150"></el-table-column>
      <el-table-column prop="Hopeful_time" label="预期时间" width="150"></el-table-column>
      <el-table-column prop="End_time" label="结束时间" width="150"></el-table-column>
      <el-table-column prop="Dispatch_part" label="派工内容" width="200"></el-table-column>
      <el-table-column prop="with" label="详细"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="mini" @click="openEditDialog(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加派工弹窗 -->
    <el-dialog v-model="addDialogVisible" title="添加派工">
      <el-form :model="addForm">
        <el-form-item label="派工人ID">
          <el-input v-model="addForm.Dispatch_id"></el-input>
        </el-form-item>
        <el-form-item label="被派工ID">
          <el-input v-model="addForm.Dispatched_id"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="addForm.Start_time" type="datetime" placeholder="选择开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="预期时间">
          <el-date-picker v-model="addForm.Hopeful_time" type="datetime" placeholder="选择预期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="addForm.End_time" type="datetime" placeholder="选择结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="派工内容">
          <el-input v-model="addForm.Dispatch_part"></el-input>
        </el-form-item>
        <el-form-item label="详细">
          <el-input v-model="addForm.with" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑派工弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑派工">
      <el-form :model="editForm">
        <el-form-item label="派工人ID">
          <el-input v-model="editForm.Dispatch_id"></el-input>
        </el-form-item>
        <el-form-item label="被派工ID">
          <el-input v-model="editForm.Dispatched_id"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="editForm.Start_time" type="datetime" placeholder="选择开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="预期时间">
          <el-date-picker v-model="editForm.Hopeful_time" type="datetime" placeholder="选择预期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="editForm.End_time" type="datetime" placeholder="选择结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="派工内容">
          <el-input v-model="editForm.Dispatch_part"></el-input>
        </el-form-item>
        <el-form-item label="详细">
          <el-input v-model="editForm.with" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const dispatches = ref([]);

// 获取当前派工人ID（这里假设有一个方法 getCurrentUserId()）
const getCurrentUserId = () => {
  // 实际应用中，这里应该是从存储或其他地方获取当前用户ID
  return '123'; // 示例ID
};

onMounted(async () => {
  try {
    const response = await axios.get(`/api/dispatches/${getCurrentUserId()}`);
    dispatches.value = response.data;
  } catch (error) {
    console.error('Failed to fetch dispatches:', error);

    // 如果请求失败，添加伪造数据
    dispatches.value = [
      {
        id: 1,
        Dispatch_id: 1,
        Dispatched_id: 2,
        Start_time: '2023-10-01 08:00',
        Hopeful_time: '2023-10-01 12:00',
        End_time: '2023-10-01 16:00',
        Dispatch_part: '测试派工内容1',
        with: '这是详细信息1'
      },
      {
        id: 2,
        Dispatch_id: 1,
        Dispatched_id: 3,
        Start_time: '2023-10-02 08:00',
        Hopeful_time: '2023-10-02 12:00',
        End_time: '2023-10-02 16:00',
        Dispatch_part: '测试派工内容2',
        with: '这是详细信息2'
      },
      {
        id: 3,
        Dispatch_id: 2,
        Dispatched_id: 4,
        Start_time: '2023-10-03 08:00',
        Hopeful_time: '2023-10-03 12:00',
        End_time: '2023-10-03 16:00',
        Dispatch_part: '测试派工内容3',
        with: '这是详细信息3'
      },
      {
        id: 4,
        Dispatch_id: 2,
        Dispatched_id: 5,
        Start_time: '2023-10-04 08:00',
        Hopeful_time: '2023-10-04 12:00',
        End_time: '2023-10-04 16:00',
        Dispatch_part: '测试派工内容4',
        with: '这是详细信息4'
      },
      {
        id: 5,
        Dispatch_id: 3,
        Dispatched_id: 6,
        Start_time: '2023-10-05 08:00',
        Hopeful_time: '2023-10-05 12:00',
        End_time: '2023-10-05 16:00',
        Dispatch_part: '测试派工内容5',
        with: '这是详细信息5'
      },
      {
        id: 6,
        Dispatch_id: 3,
        Dispatched_id: 7,
        Start_time: '2023-10-06 08:00',
        Hopeful_time: '2023-10-06 12:00',
        End_time: '2023-10-06 16:00',
        Dispatch_part: '测试派工内容6',
        with: '这是详细信息6'
      },
      {
        id: 7,
        Dispatch_id: 4,
        Dispatched_id: 8,
        Start_time: '2023-10-07 08:00',
        Hopeful_time: '2023-10-07 12:00',
        End_time: '2023-10-07 16:00',
        Dispatch_part: '测试派工内容7',
        with: '这是详细信息7'
      },
      {
        id: 8,
        Dispatch_id: 4,
        Dispatched_id: 9,
        Start_time: '2023-10-08 08:00',
        Hopeful_time: '2023-10-08 12:00',
        End_time: '2023-10-08 16:00',
        Dispatch_part: '测试派工内容8',
        with: '这是详细信息8'
      },
      {
        id: 9,
        Dispatch_id: 5,
        Dispatched_id: 10,
        Start_time: '2023-10-09 08:00',
        Hopeful_time: '2023-10-09 12:00',
        End_time: '2023-10-09 16:00',
        Dispatch_part: '测试派工内容9',
        with: '这是详细信息9'
      },
      {
        id: 10,
        Dispatch_id: 5,
        Dispatched_id: 11,
        Start_time: '2023-10-10 08:00',
        Hopeful_time: '2023-10-10 12:00',
        End_time: '2023-10-10 16:00',
        Dispatch_part: '测试派工内容10',
        with: '这是详细信息10'
      }
    ];
  }
});

// 添加派工弹窗相关
const addDialogVisible = ref(false);
const addForm = ref({
  Dispatch_id: '',
  Dispatched_id: '',
  Start_time: '',
  Hopeful_time: '',
  End_time: '',
  Dispatch_part: '',
  with: ''
});

const openAddDialog = () => {
  addDialogVisible.value = true;
};

const handleAddConfirm = () => {
  // 这里可以发送添加派工的请求
  console.log('添加派工', addForm.value);
  addDialogVisible.value = false;
};

// 编辑派工弹窗相关
const editDialogVisible = ref(false);
const editForm = ref({});

const openEditDialog = (index, row) => {
  editForm.value = { ...row };
  editDialogVisible.value = true;
};

const handleEditConfirm = () => {
  // 这里可以发送编辑派工的请求
  console.log('编辑派工', editForm.value);
  editDialogVisible.value = false;
};
</script>

<style scoped>
h1 {
  color: #42b883;
}
</style>